<template>
	<div class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				分配线索
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<label class="label">分配给</label>
				<div class="list">
					<div class="li" v-for="item in userList" @click="check(item.userId)"
						 :class="param.uid==item.userId? 'li_active':''" >
						{{item.nickName}}
					</div>
				</div>
			</div>
			
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,user;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			param : {
				clueIds : null,
				uid : null,
				_wait : ""
			},
			userList : [],
		}
	},
	methods : {
		init : function(clueList) {
			vm.show = true;
			vm.open = true;
			vm.param.clueIds = [];
			
			var uid = null;
			clueList.forEach(function(clue) {
				//获取所有的线索id,和第一个线索跟进人
				vm.param.clueIds.push(clue.clueId+"");
				uid = (uid? uid : clue.executeUserId);
			})
			//以第一个线索跟进人或当前用户为选中值
			vm.param.uid = (uid? uid : user.userId);
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		sure : function() {
			api.clueAllot(vm.param).then(function(data) {
				tool.message({ showClose: true, message: "分配成功", type: 'success' });
				vm.$emit('callback');
				vm.cancel();
			})
		},
		check : function(id) {
			vm.param.uid = id;
		}
	},
	created : function() {
		vm = this;
		user = tool.getItem(lsKey.user,true);
		
		api.userListByCampus({campusId : vm.$store.state.campusId}).then(function(data) {
			vm.userList = data.userList;
		})
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	.panel {
		width: 6.1rem;
	}
	.form {
		padding: 0 0.3rem;
		margin-bottom: 0.2rem;
		height: 3.54rem;
		color: #666666;
	}
	.label {
		float: left;
		font-size: 0.14rem;
		margin: 0 0.13rem;
		margin-top: 0.1rem;
	}
	.list {
		float: left;
		padding: 0.03rem 0;
		font-size: 0.18rem;
		letter-spacing: 0.01rem;
		width: 4.16rem;
		height: 3.54rem;
		border: 1px solid rgb(220,223,230);
		border-radius: 0.05rem;
		overflow: auto;
	}
	.list::-webkit-scrollbar {
		width: 0.03rem;
	}
	.list::-webkit-scrollbar-thumb {
		border-radius: 0.03rem;
    	background: #3885F8;
	}
			
	.li {
		line-height: 0.32rem;
		padding-left: 0.2rem;
		color: #333333;
		cursor: pointer;
	}
	.li:hover {
		background-color: rgb(243,246,253);
		/*color: #2870ff;*/
	}
	.li_active {
		background-color: rgb(243,246,253);
		color: #2870ff;
	}
</style>